<template>
  <div>
    <div  class="basetable-box">
    <!-- 过滤表单 -->
    <el-card  shadow="never"  v-if="tableSetting.filetrOptions.length || tableSetting.tableHaederBtn">
      <el-row style="margin-top:0px;">
        <el-col>
          <span style="display:inline-block;margin-top:10px;" v-for="item in tableSetting.filetrOptions" :key="item.index" v-if="tableSetting.filetrOptions.length">
            <!-- 姓名 -->
            <name-input 
            ref="nameipt"
            v-if="item.componentName == 'nameipt'" 
            :placeholder="item.placeholder"
            :paramsName="item.paramsName"
            @handleChange="handleChange"></name-input>
            <!-- 姓名 -->
            <sex-input
            ref="sexipt"
            v-if="item.componentName == 'sexipt'" 
            :placeholder="item.placeholder"
            :paramsName="item.paramsName"
            @handleChange="handleChange"
            ></sex-input>
            <!-- 状态下拉 -->
            <statusSelect
            ref="statusSelect"
            v-if="item.componentName == 'statusSelect'" 
            :placeholder="item.placeholder"
            :paramsName="item.paramsName"
            @handleChange="handleChange"
            >
            </statusSelect>
            <!-- 类型选择 -->
            <typeSelect
            ref="typeSelect"
            v-if="item.componentName == 'typeSelect'" 
            :placeholder="item.placeholder"
            :paramsName="item.paramsName"
            @handleChange="handleChange">
            </typeSelect>

            <!-- 开始时间 -->
            <start-time
            ref="startTime"
            v-if="item.componentName == 'startTime'"
            :paramsName="item.paramsName"
            @handleChange="handleChange"
            ></start-time>
          
            <!-- 结束时间 -->
            <end-time
            ref="endTime"
            v-if="item.componentName == 'endTime'"
            :paramsName="item.paramsName"
            @handleChange="handleChange"
            ></end-time>
                    
          </span>

          <el-button
          type="primary"
          v-if="tableSetting.tableHaederBtn"
          @click="handleTabelHeaderAdd">
              {{tableSetting.tableHaederBtn}}
          </el-button>

          <el-button @click="handleSearch" type="primary" v-if="tableSetting.filetrOptions.length" style="margin-bottom:10px;margin-top:10px;">
            <i class="el-icon-search"></i> 搜索
          </el-button>

          <el-button @click="handleRest" type="primary" v-if="tableSetting.filetrOptions.length" style="margin-bottom:10px;margin-top:10px;">重置</el-button>

          <el-button type="danger" style="margin-bottom:10px;margin-top:10px;" v-show="deleteBtnShow" @click="handleDeleteAll">批量删除</el-button>

        </el-col>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-row style="margin-top:15px;">
      <el-col :span="24">
        <el-table  
          :header-cell-style="{background:'#dff1fc'}"
          :data="tableData" 
          v-loading="tableLoading" 
          @selection-change="handleAllChoose"
          @sort-change="handleSortChange"
          style="width: 100%;">

          <el-table-column 
          v-if="tableSetting.tabletype == 'selection'" 
          type="selection" 
          width="55">
          </el-table-column>


          <el-table-column 
          :sortable="item.sortable || false"
          v-for="item in tableSetting.options" 
          :key="item.index" 
          :prop="item.prop" 
          :align="item.align || 'center'"
          :label="item.label" 
          :width="item.width" 
          :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="item.html" 
                   :class="item.color">
                <i v-if="item.icon" :class="'iconfont' + ' '+ item.icon"></i>
                <span v-html="item.html(scope.row)" @click="handleTableCilk(item.handleName,scope.row,scope.$index)" style="cursor:pointer"></span>
              </div>
              <div v-else :class="item.color">
                <i v-if="item.icon" :class="'iconfont' +' '+ item.icon"></i>
                <span @click="handleTableCilk(item.handleName,scope.row,scope.$index)" style="cursor:pointer">{{scope.row[item.prop]}}</span>
              </div>
            </template>
          </el-table-column>
          </el-card>

          <el-table-column label="操作" width="150" align="right"  fixed="right">
            <template slot-scope="scope">
              <span  v-if="tableSetting.btns&&tableSetting.btns.length">
                  <el-button 
                  v-for="el in tableSetting.btns" 
                  :key="el.index" 
                  :size="el.size || 'samll'" 
                  :type="el.type || 'primary'" 
                  @click="handleTable(el.handleName,scope.row,scope.$index)"
                  v-if="!el.show || (el.show&&el.show(scope.row))"
                  >
                  {{el.text}}
                </el-button>
              </span>
              <span v-if="tableSetting.btnsIcon && tableSetting.btnsIcon.length">
                 <a
                  style="font-size:22px;margin:0 10px;cursor:pointer;"
                  v-for="el in tableSetting.btnsIcon"
                  :class="'iconfont' + ' ' + el.icon" 
                  :key="el.index"
                  @click="handleTable(el.handleName,scope.row,scope.$index)"
                  :title="el.text"></a>
              </span>
             
            </template>
                
          </el-table-column>
        </el-table>
      </el-col>
      </el-card>
    </el-row>
  </div>

    <!-- 分页 -->
    <el-row>
      <el-col style="margin-top:50px;">
        <el-pagination style="float:right" @current-change="handleChangePage" background layout="prev, pager, next" :page-count="pageTotal">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>



<script>
  // import nameInput from '@/components/filterFrom/nameInput.vue' //姓名
  // import sexInput from '@/components/filterFrom/sexInput.vue' //性别
  // import statusSelect from '@/components/filterFrom/statusSelect.vue' //状态选择
  // import typeSelect from '@/components/filterFrom/typeSelect.vue' //类型选择
  // import startTime from '@/components/filterFrom/startTime.vue' //开始时间
  // import endTime from '@/components/filterFrom/endTime.vue' //开始时间
  // import { setTimeout } from 'timers';

  export default {
    props: ["tableSetting"],
    // components: {
    //   nameInput,
    //   sexInput,
    //   statusSelect,
    //   typeSelect,
    //   startTime,
    //   endTime
    // },
    data() {
      return {
        tableLoading: false, //表格laoding
        deleteBtnShow: false, //表格批量删除按钮
        tableData: [], //表格数据
        tableParams: {
          pageNum: 1,
          pageSzie: 10
        }, //表格请求参数
        manyData: [], //多选的数据
        pageTotal: 0, //页面数据总数
      };
    },
    mounted() {
      this.initData()
    },
    methods: {
      //表格请求数据
      initData() {
        console.log(this.tableParams, '表格请求参数')
        this.$emit('initDataParams',this.tableParams)
        this.tableData = [
          {lastActivityTime:1,locationId:3,locationValue:2,online:1,termCode:324,termId:12,termName:123,online:1},
          {lastActivityTime:1,locationId:1,locationValue:1,online:1,termCode:324,termId:12,termName:123,online:2},
          {lastActivityTime:1,locationId:2,locationValue:4,online:1,termCode:324,termId:12,termName:123,online:1},
        ]
        //这里写接口请求表格数据
        // this.tableLoading = true
        //如果表格配置存在请求函数
        // if (this.tableSetting.tabelApiFn) {
        //   this.tableLoading = true
        //   console.log(this.tableParams, '表格请求参数')
        //   this.tableSetting.tabelApiFn(this.tableParams).then(res => {
        //     this.tableLoading = false
        //     // console.log(res)
        //     // if(res.code == 0){
        //     // this.tableData = res.data.data
        //     // this.pageTotal = res.data.totalPage //总页数
        //     // }
        //     console.log(res.data.termList)
        //     this.tableData = res.data.termList
        //   })
        // }
      },
      //多选表格事件
      handleAllChoose(val) {
        this.manyData = val
        if (val.length) {
          this.deleteBtnShow = true
        } else {
          this.deleteBtnShow = false
        }
      },
      //多选删除
      handleDeleteAll() {
        this.$emit('handleCommon', 'handleTabelChoose', this.manyData)
      },
      //表格事件
      handleTable(name, row, idx) {
        this.$emit('handleCommon', name, row, idx)
      },
      //表头新增按钮
      handleTabelHeaderAdd(){
        this.$emit('handleTabelHeaderAdd')
      },
      //排序事件
      handleSortChange(a){
         console.log(a)
      },
      //分页
      handleChangePage(idx) {
        this.tableParams.pageNum = idx
        this.initData()
      },
      //条件查询
      handleSearch() {
        this.tableParams.pageNum = 1
        this.initData()
      },
      //重置按按钮
      handleRest() {
        //清空所有过滤表单
        for (let i in this.$refs) {
          if (this.$refs[i] && this.$refs[i][0] && this.$refs[i][0].rest) {
            this.$refs[i][0].rest()
          }
        }
        this.initData()
      },
      //表格某一项点击事件
      handleTableCilk(name, row,idx) {
        this.$emit('handleCommon', name, row,idx)
      },
      //监听表单变化  表格参数
      handleChange(value, params) {
        this.tableParams[params] = value
      }
    }
  };
</script>



<style>
  .red {
    color: red;
  }
  .green {
    color: green
  }
  .bule {
    color: blue;
  }
  .el-table td,
  .el-table th.is-leaf {
    padding: 2px;
  }
  .el-table{
    border: none;
    border-radius: 5px;
  }

</style>